package myJs.confirmActive

import myJs.CpLayer._
import myJs.Implicits._
import myJs.{MyPage, Utils}
import myJs.api.Api
import myJs.assets.assetsCss
import myJs.cps._
import myJs.login.Login
import myJs.myPkg.jquery._
import myJs.myPkg.{BackstretchOptions, LayerOptions, ReactRouterDOM, layer}
import org.scalajs.dom.{URLSearchParams, document}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo.EmailData
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useLayoutEffect, useRef, useState}
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js.JSConverters._

@react object Cp {

  type Props = Unit

  private val css = List(
    assetsCss.Layer,
    assetsCss.Sweetalert,
    assetsCss.BootstrapMin,
    assetsCss.BootstrapThemeMin,
    assetsCss.Doc,
    assetsCss.BootstrapDatepicker3,
    assetsCss.FontAwesomeMin,
    assetsCss.Components,
    assetsCss.BootstrapTable,
    assetsCss.Nprogress,
    assetsCss.TableFilter,
    assetsCss.Login5Min,
  )

  case class GVerify(kind: String, height: Double, width: Double)

  private val css2 = List(
    assetsCss.BootstrapResponse,
    assetsCss.My
  )

  sealed trait ActiveStatus

  object NotGet extends ActiveStatus

  object HasActived extends ActiveStatus

  object NoActived extends ActiveStatus

  val component = FunctionalComponent[Props] { props =>
    val navigate = ReactRouterDOM.useNavigate()
    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val email = searchParams.get("email")
    val (activeStatus, setActiveStatus) = useState(NotGet: ActiveStatus)

    object FTool {

      def confirmActive = () => {
        val request = EmailData(email = email)
        Api.registerActive(request).map { response =>
          val curActiveStatus = response.hasActived match {
            case true => HasActived
            case false => NoActived
          }
          setActiveStatus(curActiveStatus)
        }
        ()
      }
    }

    useEffect(() => {
      val images = List("login_3.jpg", "login_2.jpg", "login_1.jpg").map { name =>
        s"${Api.images}/${name}"
      }.toJSArray
      $(".login-bg").backstretch(images = images, options = BackstretchOptions(fade = 1e3, duration = 8e3))
    }, List()
    )

    useEffect(() => {
      FTool.confirmActive()
    }, List()
    )

    useEffect(() => {
      startLoad
      document.title = s"激活成功-LiveForest"
      loadComplete
    }, List()
    )

    div(className := "login",
      div(className := "user-login-5",
        div(className := "row bs-reset",
          div(className := "col-md-6 login-container bs-reset",
            TitleInfoCp(),
            div(className := "login-content",
              div(className := "register",
                h2(className := "page-heading text-success", style := Style(fontSize = 25),
                  "激活成功"
                ),
              ),
              activeStatus match {
                case HasActived => div(className := "row",
                  div(className := "fgleftct", style := Style(textAlign = csstypeStrings.center, marginTop = 10,
                    display = csstypeStrings.flex, justifyContent = csstypeStrings.center),
                    div(style := Style(), className := "fglefttitle",
                      "您的账户无须再次激活，",
                      div(style := Style(fontSize = 20, marginTop = 0),
                        s"返回", a(href := s"${MyPage.login.absolutePath}", " 登录页面"), "。"
                      ),
                    )
                  )
                )
                case NoActived => div(className := "row",
                  div(className := "fgleftct", style := Style(textAlign = csstypeStrings.center, marginTop = 10,
                    display = csstypeStrings.flex, justifyContent = csstypeStrings.center),
                    div(style := Style(), className := "fglefttitle",
                      "您的账户激活成功，",
                      div(style := Style(fontSize = 20, marginTop = 0),
                        s"返回", a(href := s"${MyPage.login.absolutePath}", " 登录页面"), "。"
                      ),
                    )
                  )
                )
                case NotGet => div()
              }
            ),
            div(className := "login-footer",
              div(className := "row bs-reset",
                div(className := "col-xs-12 bs-reset",
                  div(className := "login-copyright text-right",
                    p(style := Style(color = "black"),
                      "版权所有2018 深圳市绘云生物科技有限公司 All Rights Reserved"
                    )
                  )
                )
              )
            )
          ),
          div(className := "col-md-6 bs-reset",
            div(className := "login-bg")
          )
        )
      )
    )
  }

}
